<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<title>生命体征检测云平台</title>
		<link rel="shortcut icon" href="static/logo.ico" />
		<link rel="stylesheet" href="static/css/index.css" />
		<link rel="stylesheet" href="static/layui/css/layui.css" />
		<script type="text/javascript" src="static/js/jquery.min.js"></script>
		<script src="static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="static/echarts5.4.0/echarts.js"></script>
		<script type="text/javascript" src="static/js/vue.js"></script>
		<script type="text/javascript" src="static/js/axios.min.js"></script>
		<script type="text/javascript" src="static/js/config.js"></script>
		<style>
			html,
			body,
			#container {
				height: 100%;
				width: 100%;
			}

			.container {
				height: auto;
				width: 100%;
			}

			.container 2 {
				height: auto;
				width: 100%;
			}

			.collision-btn.disable {
				background-image: none;
				color: lightgrey;
				border-color: lightgrey;
				cursor: not-allowed;
			}

			.collision-btn.disable:hover {
				background-color: #fff;
				border-color: lightgrey;
			}

			.input-card .btn {
				margin-right: .8rem;
			}

			.amap-marker {
				opacity: 0.01;
			}

			.nav-right {
				top: 1.5rem !important;
			}

			.info {
				z-index: 999 !important;
			}

			.grid-text {
				font-size: 30px;
				font-weight: 800;
			}

			.text-red,
			.line-red,
			.lines-red {
				color: #c11508;
			}

			.text-green,
			.line-green,
			.lines-green {
				color: #39b54a;
			}

			.grid-xt-color,
			.line-xt {
				color: #FF5959;
			}

			.grid-hx-color,
			.line-hx {
				color: #00C6B3;
			}

			.grid-mx-color,
			.line-mx {
				color: #FFB06F;
			}

			.grid-td-color,
			.line-td {
				color: #8E1EFF;
			}

			.grid-xy-color,
			.line-xy {
				color: #2E83F8;
			}

			.show-grid {
				padding: 20px;
				box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.2);
			}

			.grid-demo {
				margin: 1rem;
				padding: 20px;
				line-height: 60px;
				text-align: center;
				background-color: #ffffff;
				color: #000000;
				border-radius: 10px;
			}

			.show-icon-img {
				width: 40px;
				height: 40px;
			}

			.grid-tag {
				font-size: 12px;
				vertical-align: middle;
				position: relative;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				padding: 0px 8px;
				height: 25px;
				font-family: Helvetica Neue, Helvetica, sans-serif;
				white-space: nowrap;
			}

			.grid-tag[class*="line-"]::after {
				content: " ";
				width: 200%;
				height: 200%;
				position: absolute;
				top: 0;
				left: 0;
				border: 1px solid currentColor;
				-webkit-transform: scale(0.5);
				transform: scale(0.5);
				-webkit-transform-origin: 0 0;
				transform-origin: 0 0;
				box-sizing: border-box;
				border-radius: inherit;
				z-index: 1;
				pointer-events: none;
			}

			.layui-layer-btn0 {
				border-color: #063683 !important;
				background-color: #063683 !important;
				color: #fff;
			}

			.layui-table td, .layui-table th {
				width: 6.25rem;
				font-size: 10px;
				text-align: center;
				    border-top-width: 1px;
				    border-right-width: 0px;
				    border-bottom-width: 1px;
				    border-left-width: 0px;
			}
		</style>
		<script>
			layui.use(['dropdown', 'layer'], function() {
				var dropdown = layui.dropdown;
				var layer = layui.layer;
				dropdown.on('click(docDemoMenu1)', function(options) {
					var othis = $(this); //当前菜单列表的 DOM 对象
					console.log(options.url)

				});
				$("#switchs").click(function() {
					layer.confirm('您确定切换成社区管理？', {
						btn: ['确定', '取消'] //按钮
					}, function() {
						window.location = 'index.html'
					}, function() {

					});
				});
			});
			$(function() {

				$("#pnav").load("public_navigation.html");
				$(".sign_out").click(function() {
					localStorage.clear();
					window.location = 'login.html'
				});
				$('.userinfo').hover(function() {});
				$('#xueyang').mouseover(function() {
					layer.open({
						type: 1,
						title: '血氧数据',
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' + xueyangtext + '</div>'
					});
				});
				$('#xinlv').mouseover(function() {
					layer.open({
						type: 1,
						title: '心率数据',
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' + xueyangtext + '</div>'
					});
				});
				$('#huxilv').mouseover(function() {
					layer.open({
						type: 1,
						title: '呼吸率数据',
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' + xueyangtext + '</div>'
					});
				});
				$('#maixiang').mouseover(function() {
					layer.open({
						type: 1,
						title: '脉象数据',
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' + xueyangtext + '</div>'
					});
				});
				$('#ganzhijuli').mouseover(function() {
					layer.open({
						type: 1,
						title: '感知距离数据',
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' + xueyangtext + '</div>'
					});
				});
				$('#shangchuangshijian').mouseover(function() {
					layer.open({
						type: 1,
						title: '上床时间数据',
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' + xueyangtext + '</div>'
					});
				});
				$('#rushuishijian').mouseover(function() {
					layer.open({
						type: 1,
						title: '入睡时间数据',
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' + xueyangtext + '</div>'
					});
				});
				$('#qingxishijian').mouseover(function() {
					layer.open({
						type: 1,
						title: '清醒时间数据',
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' + xueyangtext + '</div>'
					});
				});
				$('#xichuangshijian').mouseover(function() {
					layer.open({
						type: 1,
						title: '离床时间数据',
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' + xueyangtext + '</div>'
					});
				});
				$('#lichuangbaojian').mouseover(function() {
					layer.open({
						type: 1,
						title: '离床报警数据',
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' + xueyangtext + '</div>'
					});
				});
				$('#wendu').mouseover(function() {
					layer.open({
						type: 1,
						title: '温度数据',
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' + xueyangtext + '</div>'
					});
				});
				$('#shidu').mouseover(function() {
					layer.open({
						type: 1,
						title: '湿度数据',
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' + xueyangtext +
							'</div>'
					});
				});
				$('#qiya').mouseover(function() {
					layer.open({
						type: 1,
						title: '气压数据',
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' +
							xueyangtext + '</div>'
					});
				});
				$('#co2').mouseover(function() {
					layer.open({
						type: 1,
						title: 'CO2数据',
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' +
							xueyangtext + '</div>'
					});
				});
				$('#tvoc').mouseover(function() {
					layer.open({
						type: 1,
						title: 'TVOC数据',
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' +
							xueyangtext + '</div>'
					});
				});

			})
		</script>
	</head>
	<body>
		<div id="app">
			<input type="hidden" value="" id="openeinfo" />
			<div style="margin-top: 70px;background-color: #e5e5e5;"></div>
			<div class="layui-panel" style="float: left; width: 10% !important;" id="pnav"></div>
			<div class="container" style="width: 90% !important; float: right;padding-left: 30px;">
				<div class="layui-fluid">
					<fieldset class="layui-elem-field layui-field-title">
						<legend>个人监测</legend>
					</fieldset>
					<div class="layui-row">
						<div class="layui-col-sm3"
							style="padding: 20px;box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);background: #fff;">
							<div class="grid-demo grid-demo-bg1">
								<div class="layui-row">
									<div class="layui-col-md9" style="font-size: 18px;padding: 20px;">
										基本信息
									</div>
									<div class="layui-col-md3" style="font-size: 18px;padding: 20px;">
										<a class="layui-btn layui-btn-normal" href="user_info.html"
											style="float: left;height: 25px;line-height: 25px !important; background-color: #fff !important; color:#3d6eff;">编辑</a>
									</div>
								</div>
								<div class="layui-row" style="padding: 20px;">
									<div class="layui-col-md12">
										<img src="static/image/user.png"
											style="background-color: #eaeaea;border-radius: 58%; width: 110px;height: 110px;" />
									</div>
								</div>
							</div>
							<div class="layui-row">
								<div class="layui-col-md9" style="font-size: 16px;padding: 20px;">
									<span style="font-size: 14px;">用户名：</span><span
										style="font-size: 14px;">{{uInfoData.userName}}-{{uInfoData.phone}}</span>
								</div>
								<div class="layui-col-md3" style="font-size: 16px;padding: 20px;">
									<!-- 	<a class="layui-btn layui-btn-normal" href="#"
									style="float: left;height: 25px;line-height: 25px !important; background-color: #fff !important; color:#3d6eff;" id="switchs">切换</a> -->
								</div>
							</div>
							<div class="layui-row">
								<div class="layui-col-md12" style="font-size: 16px;padding: 20px;">
									<span style="font-size: 14px;">性别：</span><span style="font-size: 14px;"
										v-if="uInfoData.sex==1">男</span><span style="font-size: 14px;" v-else>女</span>
								</div>
							</div>
							<div class="layui-row">
								<div class="layui-col-md12" style="font-size: 16px;padding: 20px;">
									<span style="font-size: 14px;">生日：</span><span
										style="font-size: 14px;">{{uInfoData.bringDate}}</span>
								</div>
							</div>
							<div class="layui-row">
								<div class="layui-col-md12" style="font-size: 16px;padding: 20px;">
									<span style="font-size: 14px;">身高：</span><span
										style="font-size: 14px;">{{uInfoData. hight}}CM</span>
								</div>
							</div>
							<div class="layui-row">
								<div class="layui-col-md12" style="font-size: 16px;padding: 20px;">
									<span style="font-size: 14px;">体重：</span><span
										style="font-size: 14px;">{{uInfoData.weight}}KG</span>
								</div>
							</div>
						</div>
						<div class="layui-col-sm8 "
							style="padding: 20px;box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);background: #fff;margin-left: 10px;">
							<div class="layui-row">
								<blockquote class="layui-elem-quote" style="height: 62px;">
									<span style="font-size: 20px ;font-weight: 800;float: left;">历史数据</span>
									<div class="layui-form" style="float: left;margin-left: 40px;">
										<div class="layui-form-item">
											<div class="layui-inline">
												<label class="layui-form-label"
													style="font-size: 14px; width: 100px;line-height: 25px;padding: 9px 0 15px 9px;">筛选类型:</label>
												<div class="layui-input-block">
													<!-- <select name="interest" id="datatype">
															<option value="">请选择类型</option>
															<option value="1" selected="">指检查记录</option>
															<option value="2">连续监测记录</option>
														</select>
														 -->
													<input type="radio" name="datatype" value="1" title="指检查记录">
													<input type="radio" name="datatype" value="2" title="连续监测记录">
												</div>
											</div>
											<div class="layui-inline">
												<label class="layui-form-label"
													style="font-size: 12px; width: 100px;">日期条件:</label>
												<div class="layui-inline" id="sotime">
													<div class="layui-input-inline">
														<input type="text" autocomplete="off" class="layui-input"
															placeholder="请选择年月日" id="date1">
													</div>
												</div>
											</div>
										</div>
									</div>

									<a class="layui-btn layui-btn-normal" href="#"
										style="float: left;height: 30px;line-height: 26px !important;"
										v-on:click="searchs(1)">筛选</a>

								</blockquote>
								<div class="layui-form">
									<table class="layui-table">
										<tr>
											<th style="width: 148px;">日期</th>
											<th style="width: 80px;">血氧<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="xueyang"
													οnmοuseοver="showtap(1,xueyang)"></i></th>
											<th style="width: 78px;">心率<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="xinlv"></i>
											</th>
											<th style="width: 90px;">呼吸率<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="huxilv"></i>
											</th>
											<th style="width: 80px;">脉象<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="maixiang"></i>
											</th>
											<th style="width: 100px;">感知距离<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="ganzhijuli"></i>
											</th>
											<!-- <th style="width: 170px;">上床时间<i class="layui-icon layui-icon-tips"
														style="margin-left: 5px; line-height: 30px;"
														id="shangchuangshijian"></i>
												</th>
												<th style="width: 170px;">入睡时间<i class="layui-icon layui-icon-tips"
														style="margin-left: 5px; line-height: 30px;"
														id="rushuishijian"></i>
												</th>
												<th style="width: 170px;">清醒时间<i class="layui-icon layui-icon-tips"
														style="margin-left: 5px; line-height: 30px;"
														id="qingxishijian"></i>
												</th>
												<th style="width: 170px;">离床时间<i class="layui-icon layui-icon-tips"
														style="margin-left: 5px; line-height: 30px;"
														id="lichuangbaojian"></i></th> -->
											<th style="width: 80px;">温度<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="wendu"></i>
											</th>
											<th style="width: 80px;">湿度<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="shidu"></i>
											</th>
											<th style="width: 80px;">气压<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="qiya"></i>
											</th>
											<th style="width: 80px;">CO2<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="co2"></i>
											</th>
											<th style="width: 80px;">TVOC<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="tvoc"></i>
											</th>
										</tr>
									</table>
									<table class="layui-table" style="margin-top: -11px;" v-if="loglist!=''">
										<tbody style="overflow-y:auto; overflow-x:hidden;height:400px;display: block;">
											<tr v-for="item in loglist" :key="item.id">
												<th style="width: 194px;">{{item.starttime}}</th>
												<th style="width: 85px;">{{item.avgspo2}}%</th>
												<th style="width: 85px;">{{item.avgrtHeartRate}}</th>
												<th style="width: 90px;">{{item.avgrtBreath}}</th>
												<th style="width: 85px;">{{item.avgmai}}</th>
												<th style="width: 100px;">{{item.avgrrange}}CM</th>
												<!-- 				<th style="width: 170px;">20230410 20:01:10</th>
												<th style="width: 170px;">20230410 22:01:10</th>
												<th style="width: 170px;">20230410 06:01:10</th>
												<th style="width: 170px;">20230411 07:11:10</th> -->
												<th style="width: 85px;">{{item.avgtemp}}℃</th>
												<th style="width: 85px;">{{item.avghumidity}}%</th>
												<th style="width: 85px;">{{item.avgpressure}}kPa</th>
												<th style="width: 85px;">{{item.avgco2}}PPM</th>
												<th style="width: 85px;">{{item.avgtvoc}}</th>
											</tr>
										</tbody>
									</table>
									<div style="width: 100%;height: 300px;font-size: 18px;text-align: center;padding-top: 100px;" v-else>暂无数据</div>
								</div>
								<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
									<legend>血氧记录 <span style="color: #63BA79; font-size: 14px;">(次/每分钟)</span></legend>
								</fieldset>
								<div class="layui-row">
									<div class="layui-col-md12">
										<div id="main0" style="width:100%;height:260px;"></div>
									</div>
									<div class="layui-col-md12" style="text-align: center;">
										<div class="layui-row" style="text-align: center;">
											<div class="layui-col-md3"> 平均值：80%</div>
											<div class="layui-col-md3"> 范围:80 ~ 100</div>
										</div>
									</div>
								</div>
								<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
									<legend>心跳记录<span style="color: #63BA79; font-size: 14px;">(次/每分钟)</span></legend>
								</fieldset>
								<div class="layui-row">
									<div class="layui-col-md12">
										<div id="main" style="width:100%;height:260px;"></div>
									</div>
									<div class="layui-col-md12" style="text-align: center;">
										<div class="layui-row" style="text-align: center;">
											<div class="layui-col-md3"> 平均值：80次/每分钟</div>
											<div class="layui-col-md3"> 范围:65 ~ 110</div>
										</div>
									</div>

								</div>
								<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
									<legend>呼吸记录 <span style="color: #63BA79; font-size: 14px;">(次/每分钟)</span></legend>
								</fieldset>
								<div class="layui-row">
									<div class="layui-col-md12">
										<div id="main2" style="width:100%;height:260px;"></div>
									</div>
									<div class="layui-col-md12" style="text-align: center;">
										<div class="layui-row" style="text-align: center;">
											<div class="layui-col-md3"> 平均值：12次/每分钟</div>
											<div class="layui-col-md3"> 范围:12 ~ 20</div>
										</div>
									</div>
								</div>
								<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
									<legend>脉象记录 <span style="color: #63BA79; font-size: 14px;">(次/每分钟)</span></legend>
								</fieldset>
								<div class="layui-row">
									<div class="layui-col-md12">
										<div id="main3" style="width:100%;height:260px;"></div>
									</div>
									<div class="layui-col-md12" style="text-align: center;">
										<div class="layui-row" style="text-align: center;">
											<div class="layui-col-md3"> 平均值：<span
													style="color: #ba0003;">一息五至</span>（5.5）</div>
											<div class="layui-col-md3"> 范围:<span style="color: #000;">一息三至</span>（3.5） ~
												<span style="color: #000;">一息七至</span>（7.0）
											</div>
										</div>
									</div>
								</div>
								<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
									<legend>体动记录 <span style="color: #63BA79; font-size: 14px;">(次/每分钟)</span></legend>
								</fieldset>
								<div class="layui-row">
									<div class="layui-col-md12">
										<div id="main4" style="width:100%;height:260px;"></div>
									</div>
									<div class="layui-col-md12" style="text-align: center;">
										<div class="layui-row" style="text-align: center;">
											<div class="layui-col-md3"> 平均值：80CM</div>
											<div class="layui-col-md3"> 范围:50 ~ 80</div>
										</div>
									</div>
								</div>

							</div>
						</div>

					</div>
				</div>
			</div>
			<div class="info">
				<div class="nav-left">
					<a class="login"></a>
					<a class="hometext" href="index.html" v-if="uInfoData.loginType !=1">首页</a>
					<a class="hometext" href="home.html" v-if="uInfoData.loginType == 1">首页</a>
				</div>
				<div class="nav-right">
					<ul>
						<li><a href="monitoring.html" v-if="uInfoData.loginType !=1">监测</a></li>
						<li><a href="historical_data.html" v-if="uInfoData.loginType !=1">历史数据</a></li>
						<li><a href="historical_info.html" v-if="uInfoData.loginType == 1">历史数据</a></li>
						<li><a href="call_p.html">离床报警</a></li>
						<li><a href="#">康养中心</a></li>
						<li><a href="#">中医问诊</a></li>
					</ul>
				</div>
				<div class="userinfo" id="userinfo">
					<img src="static/image/user.png" />
					<!-- <div class="red-dot"></div> -->
					<ul class="user_dropdown">
						<li class="dropdown_item user_ctrl">
							<div class="nickname">{{uInfoData.userName}}</div>
							<div class="sign_out">退出</div>
						</li>
						<li class="dropdown_item msg_item">
							<a href="user.html" target="_blank">
								<span>个人中心</span>
							</a>
						</li>
						<li class="dropdown_item msg_item">
							<a href="my_message.html" target="_blank">
								<span>我的消息</span>
								<span class="msg_unread unread_count show">5</span>
							</a>
						</li>
						<li class="dropdown_item">
							<a href="equipment.html">
								<span>设备</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- <script type="text/javascript">
			var websocket = null;
			var datass = '';
			var rloginName = localStorage.loginName;
			//判断当前浏览器是否支持WebSocket
			if ('WebSocket' in window) {
				//连接WebSocket节点
				websocket = new WebSocket("ws://182.92.156.91:8085/websocket/" + rloginName);
			} else {
				alert('Not support websocket')
			}


			//连接发生错误的回调方法
			websocket.onerror = function() {
				console.log("websocket.error");
			};


			//连接成功建立的回调方法
			websocket.onopen = function(event) {
				console.log("websocket.open");
			}


			//接收到消息的回调方法
			websocket.onmessage = function(event) {
				if (JSON.stringify(event.data) != "{}") {
					if (event.data != '连接成功') {
						setMessageInnerHTML(event.data);
					}
				}
			}


			//连接关闭的回调方法
			websocket.onclose = function() {
				console.log("websocket.close");
			}


			//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
			window.onbeforeunload = function() {
				websocket.close();
			}

			//将消息显示在网页上
			function setMessageInnerHTML(innerHTML) {
				var data = jQuery.parseJSON(innerHTML);
				var equName = localStorage.equName;
				// console.log(data);
				if (data.onlineNum != 0 || data.onlineNum >= 1) {
					var Obj = data.accTopicObj;
					if (Obj != undefined || Obj != null) {
						// console.log(Obj.devSerial);
						if (Obj.devSerial == equName) {
							var spo2 = parseInt(Obj.spo2);
							var rtHeartRate = parseInt(Obj.rtHeartRate);
							var rtBreath = parseInt(Obj.rtBreath);
							var mai = rtHeartRate / rtBreath;
							var rrange = parseInt(Obj.rrange);
							var battery = parseInt(Obj.battery);
							localStorage["spo2"] = Obj.spo2;
							localStorage["rtHeartRate"] = Obj.rtHeartRate;
							localStorage["rtBreath"] = Obj.rtBreath;
							localStorage["mai"] = mai.toFixed(1);
							localStorage["rrange"] = Obj.rrange;
							if (data != '{}') {
								$('#sbstate').css('background-color', '#39b54a');
								$('#sbstate').html('正常');
							}
							if (spo2 >= 50 || spo2 <= 100) {
								$('#xystate').css('color', '#39b54a');
								$('#xystate').html('正常');
							} else {
								$('#xystate').css('color', '#ff0000');
								$('#xystate').html('异常');
							}
							if (rtHeartRate >= 50 || rtHeartRate <= 120) {
								$('#xtstate').css('color', '#39b54a');
								$('#xtstate').html('正常');
							} else {
								$('#xtstate').css('color', '#ff0000');
								$('#xtstate').html('异常');
							}
							if (rtBreath >= 10 || rtBreath <= 30 || rtBreath != 0) {
								$('#hxstate').css('color', '#39b54a');
								$('#hxstate').html('正常');
							} else {
								$('#hxstate').css('color', '#ff0000');
								$('#hxstate').html('异常');
							}
							if (mai > 2 && mai <= 3.4) {
								$('#mxtext').css('color', '#063683');
								// $('#mxtext').html('迟脉');
								$('#mxtext').html('一息三至');
								$('#mxstate').css('color', '#ff0000');
								$('#mxstate').html('迟脉');
							} else if (mai >= 3.5 && mai < 4.5) {
								$('#mxtext').css('color', '##');
								// $('#mxtext').html('缓脉');
								$('#mxtext').html('一息四至');
								$('#mxstate').css('color', '#25a5f7');
								$('#mxstate').html('缓脉');
							} else if (mai >= 4.5 && mai <= 5.6) {
								$('#mxtext').css('color', '#39b54a');
								// $('#mxtext').html('常脉');
								$('#mxtext').html('一息五至');
								$('#mxstate').css('color', '#39b54a');
								$('#mxstate').html('常脉');
							} else if (mai >= 6.6 && mai <= 10) {
								// $('#mxtext').html('数脉');
								$('#mxtext').css('color', '#f37198');
								$('#mxtext').html('一息六至');
								$('#mxstate').css('color', '#ff0000');
								$('#mxstate').html('数脉');
							} else if (mai != 0 && mai >= 7) {
								// $('#mxtext').html('疾脉');
								$('#mxtext').css('color', '#ff0000');
								$('#mxtext').html('一息七至');
								$('#mxstate').css('color', '#ff0000');
								$('#mxstate').html('疾脉');
							} else {
								$('#mxtext').css('color', '#ff0000');
								$('#mxtext').html('脉象异常');
								$('#mxstate').css('color', '#ff0000');
								$('#mxstate').html('异常');
							}
							if (!isFinite(mai)) {
								mai = 0;
							}
							if (rrange >= 30 || rrange <= 100) {
								$('#tdstate').css('color', '#39b54a');
								$('#tdstate').html('正常');
							} else {
								$('#tdstate').css('color', '#ff0000');
								$('#tdstate').html('异常');
							}
							$('#showwd').html(Obj.temp);
							$('#showsd').html(Obj.humidity);
							$('#showqy').html(Obj.pressure);
							$('#showyh').html(Obj.tvoc);
							$('#showxt').html(Obj.rtHeartRate);
							$('#showhx').html(Obj.rtBreath);
							$('#showmx').html(mai.toFixed(1));
							$('#showtd').html(Obj.rrange);
							$('#showxy').html(Obj.spo2);
						}
					} else {
						localStorage["spo2"] = 0;
						localStorage["rtHeartRate"] = 0;
						localStorage["rtBreath"] = 0;
						localStorage["mai"] = 0;
						localStorage["rrange"] = 0;
						$('#showxy').html(0);
						$('#showxt').html(0);
						$('#showxt').html(0);
						$('#showhx').html(0);
						$('#showmx').html(0.0);
						$('#showtd').html(0);
						console.log("没有可用数据");
					}
				} else {
					console.log("设备不存在");
					localStorage["rtHeartRate"] = 0;
					localStorage["rtBreath"] = 0;
					localStorage["mai"] = 0;
					localStorage["rrange"] = 0;
					$('#sbstate').css('background-color', '#B5B5B5');
					$('#sbstate').html('离线');
					$('#showxy').html(0);
					$('#showxt').html(0);
					$('#showhx').html(0);
					$('#showmx').html(0.0);
					$('#showtd').html(0);
				}
			}
			//关闭连接
			function closeWebSocket() {
				websocket.close();
			}


			//发送消息
			function send() {
				var message = document.getElementById('text').value;
				websocket.send(message);
			}
		</script> -->
		<script>
			var vm = new Vue({
				el: '#app', //设置当前vue对象可以操作数据的范围,注意不要把vue对象绑定到body中，因为这样，vue需要控制整个页面的内容，效率太低了
				data: {
					uInfoData: [],
					eInfoData: [],
					loglist: []
				},
				ready: function() {
					// this.getdata();
				},
				created: function() {
					this.getdata();
					this.layuint();
				},
				methods: {
					getdata: function() {
						var rloginName = localStorage.loginName;
						var equName = localStorage.equName;
						console.log(rloginName)
						if (rloginName == '' || rloginName == 'null' || rloginName == undefined) {
							// layer.msg('登录过期或者无权访问！', {
							// 	time: 1000,
							// 	end: function() {
							// 		location.href = 'login.html'
							// 	}
							// })
						} else {
							axios({
									method: 'GET',
									url: url + "/user/userInfo/lquserOwnInfo?phoneNum=" + rloginName,
									data: {}
								})
								.then(function(response) {
									localStorage["equName"] = response.data.userEquipmentList[0].equName;
									localStorage["userId"] = response.data.userId;
									vm.uInfoData.hights = response.data.hight;
									vm.uInfoData = response.data;
								})

							let data = new FormData();
							data.append('equId', equName);
							data.append('typeofMm', getyyyyMMdd());
							data.append('dataType', '1');
							data.append('queryType', '1');
							axios({
									method: 'post',
									url: url + "/history/equQueryHistoryData",
									data: data
								})
								.then(function(response) {
									vm.loglist = response.data;
									ecint();
								})
						}
					},
					EdoThis: function() {
						var optionstr = '';
						var rloginName = localStorage.loginName;
						var equName = localStorage.openeinfo;
						$.ajax({
							url: url + "/user/equipment/infoList?userId=" + rloginName,
							dataType: 'json',
							type: 'get',
							async: false,
							success: function(res) {
								$.each(res, function(index, item) {
									if (item.equName != null || item.equName !=
										"" || item.equName != "null") {
										optionstr += ' <option value="' + item.equName + '">' +
											item.equName + '</option>'; // 下拉菜单里添加元素
									}
								});
								//重新渲染 固定写法
							},

						});
						var contents =
							'<select name="interest" lay-filter="aihao" id="openeinfo" onchange="showopeneinfo(this)"><option value="">请选择设备</option>' +
							optionstr + '</select>';
						layer.open({
							title: '请选择切换的设备',
							btn: ['切换', '取消'],
							content: contents,
							yes: function(index, layero) {
								var rloginName = localStorage.loginName;
								axios({
										method: 'GET',
										url: url + "/user/equipment/updateIsDefault?userId=" +
											rloginName + "&equName=" + equName + "&isDefault=1",
										data: {}
									})
									.then(function(response) {
										var data = response.data;
										var message = response.data.message;
										if (data.code == 0) {
											layer.msg(message, {
												time: 2000,
												end: function() {
													location.href = 'home.html'
												}
											})
										} else {
											layer.msg(message);
										}
									})
							},
							btn2: function(index, layero) {
								layer.close(index);
							},
							cancel: function(index, layero) {
								if (layer.confirm('确定要关闭么')) { //只有当点击confirm框的确定时，该层才会关闭
									layer.close(index);
								}
								return false;
							}
						});
					},
					layuint: function() {

						layui.use(['form', 'table', 'layedit', 'laydate', 'dropdown', 'element', 'layer'],
							function() {
								var form = layui.form,
									table = layui.table,
									layer = layui.layer,
									layedit = layui.layedit,
									laydate = layui.laydate,
									dropdown = layui.dropdown,
									element = layui.element,
									layer = layui.layer;
								forms = layui.form;
								let data = new FormData();
								data.append('equId', '07');
								data.append('typeofMm', '20230321');
								data.append('dataType', '1');
								data.append('queryType', '1');

								laydate.render({
									elem: '#date1',
									format: 'yyyyMMdd'
								});
								laydate.render({
									elem: '#date2',
									type: 'month',
									format: 'yyyyMM'
								});
								laydate.render({
									elem: '#date3',
									type: 'year',
									format: 'yyyy'
								});
								element.on('tab(docDemoTabBrief)', function(data) {
									$('#tapval').val(data.index);
									console.log('切到到了' + data.index + '：' + this.innerHTML);
								});
							});
					},
					searchs: function(tapval) {
						var dates;
						var equnames2 = $('#equname').val();
						var datatypes = $('input[name="datatype"]:checked').val(); //$('#datatype').val();
						var equnames = localStorage.equName;
						if (tapval == 1) {
							dates = $('#date1').val();
						}
						if (tapval == 2) {
							dates = $('#date2').val();
						}
						if (tapval == 3) {
							dates = $('#date3').val();
						}
						$.ajax({
							type: 'POST',
							url: url + '/history/equQueryHistoryData',
							async: false,
							data: {
								equId: equnames,
								typeofMm: dates,
								dataType: datatypes,
								queryType: tapval
							},
							success: function(res) {
								vm.loglist = res;
								ecint();
							}
						});
					}
				}
			})

			function getyyyyMMdd() {
				var d = new Date();
				var curr_date = d.getDate();
				var curr_month = d.getMonth() + 1;
				var curr_year = d.getFullYear();
				String(curr_month).length < 2 ? (curr_month = "0" + curr_month) : curr_month;
				String(curr_date).length < 2 ? (curr_date = "0" + curr_date) : curr_date;
				var yyyyMMdd = curr_year + "" + curr_month + "" + curr_date;
				return yyyyMMdd;
			}

			function showopeneinfo(obj) {
				let val = obj.options[obj.selectedIndex].value;
				localStorage["openeinfo"] = val;
				localStorage["equName"] = val;
			}

			function ecint() {
				var chartDom0 = document.getElementById('main0');
				var myChart0 = echarts.init(chartDom0);
				var chartDom = document.getElementById('main');
				var myChart = echarts.init(chartDom);
				var chartDom2 = document.getElementById('main2');
				var myChart2 = echarts.init(chartDom2);
				var chartDom3 = document.getElementById('main3');
				var myChart3 = echarts.init(chartDom3);
				var chartDom4 = document.getElementById('main4');
				var myChart4 = echarts.init(chartDom4);
				var option;
				var datas = vm.$data.loglist;


				function randomData(times, val) {
					var now = new Date(times);
					var value = val;
					return {
						name: now.toString(),
						value: [times, value]
					};
				}
				let data0 = [];
				let data = [];
				let data2 = [];
				let data3 = [];
				let data4 = [];
				let now = new Date();
				// for (var a in datas) {
				// 	var starttime = datas[a]['starttime'];
				// 	var avgspo2 = datas[a]['avgspo2']; //血氧
				// 	var avgrtHeartRate = datas[a]['avgrtHeartRate']; //心跳
				// 	var avgrtBreath = datas[a]['avgrtBreath']; //呼吸
				// 	var avgmai = datas[a]['avgmai']; //脉搏
				// 	var avgrrange = datas[a]['avgrrange']; //体动
				// 	data0.push(randomData(starttime, avgspo2));
				// 	data.push(randomData(starttime, avgrtHeartRate));
				// 	data2.push(randomData(starttime, avgrtBreath));
				// 	data3.push(randomData(starttime, avgmai));
				// 	data4.push(randomData(starttime, avgrrange));
				// }
				
				if (datas.length!=0) {
					for (var a in datas) {
						var starttime = datas[a]['starttime'];
						var avgspo2 = datas[a]['avgspo2']; //血氧
						var avgrtHeartRate = datas[a]['avgrtHeartRate']; //心跳
						var avgrtBreath = datas[a]['avgrtBreath']; //呼吸
						var avgmai = datas[a]['avgmai']; //脉搏
						var avgrrange = datas[a]['avgrrange']; //体动
						data0.push(randomData(starttime, avgspo2));
						data.push(randomData(starttime, avgrtHeartRate));
						data2.push(randomData(starttime, avgrtBreath));
						data3.push(randomData(starttime, avgmai));
						data4.push(randomData(starttime, avgrrange));
					}
				} else {
					for (var i = 1; i <= 10; i++) {
						var starttimes=getCurrentTime(i);
						data0.push(randomData(starttimes, 0));
						data.push(randomData(starttimes, 0));
						data2.push(randomData(starttimes, 0));
						data3.push(randomData(starttimes, 0));
						data4.push(randomData(starttimes, 0));
					}
				}
				option0 = {
					color: ["#00ffff"],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							animation: false
						}
					},
					xAxis: {
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%'],
						axisLine: {
							symbol: 'arrow',
							lineStyle: {
								type: 'dashed',
							}
						},
						splitLine: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'line',
						showSymbol: false,
						data: data0
					}]
				};
				option = {
					color: ["#ec2a65"],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							animation: false
						}
					},
					xAxis: {
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%'],
						axisLine: {
							symbol: 'arrow',
							lineStyle: {
								type: 'dashed',
							}
						},
						splitLine: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'line',
						showSymbol: false,
						data: data
					}]
				};
				option2 = {
					color: ["#37aaff"],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							animation: false
						}
					},
					xAxis: {
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%'],
						axisLine: {
							symbol: 'arrow',
							lineStyle: {
								type: 'dashed',
							}
						},
						splitLine: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'line',
						showSymbol: false,
						data: data2
					}]
				};
				option3 = {
					color: ["#e5b828"],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							animation: false
						}
					},
					xAxis: {
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%'],
						axisLine: {
							symbol: 'arrow',
							lineStyle: {
								type: 'dashed',
							}
						},
						splitLine: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'line',
						showSymbol: false,
						data: data3
					}]
				};
				option4 = {
					color: ["#7b49e6"],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							animation: false
						}
					},
					xAxis: {
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%'],
						axisLine: {
							symbol: 'arrow',
							lineStyle: {
								type: 'dashed',
							}
						},
						splitLine: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'line',
						showSymbol: false,
						data: data4
					}]
				};
				myChart.setOption({
					series: [{
						data: data
					}]
				});

				option && myChart0.setOption(option0);
				option && myChart.setOption(option);
				option && myChart2.setOption(option2);
				option && myChart3.setOption(option3);
				option && myChart4.setOption(option4);

			}
			function getCurrentTime(i) {
			    var date = new Date();//当前时间
			    var year = date.getFullYear() //返回指定日期的年份
			    var month = repair(date.getMonth() + 1);//月
			    var day = repair(date.getDate());//日
			    var hour = repair(date.getHours());//时
			    var minute = repair(date.getMinutes());//分
			    var second = repair(date.getSeconds()+i);//秒
			    
			    //当前时间 
			    var curTime = year + "-" + month + "-" + day
			            + " " + hour + ":" + minute + ":" + second;
			    return curTime;
			}
			 
			//补0
			 
			function repair(i){
			    if (i >= 0 && i <= 9) {
			        return "0" + i;
			    } else {
			        return i;
			    }
			}
		</script>
	</body>
</html>
